<template>
  <div v-for="team in teamList">
    <van-card
        style="margin: 10px 0px;"
        :desc="`队伍描述：${team.teamDesc}`"
        :title="`队伍名称：${team.teamName}`"
    >
      <template #tags>
        <van-tag :color="teamStatusColor[team.teamStatus]">{{ teamStatus[team.teamStatus] }}</van-tag>
      </template>
      <template #bottom>
        <!-- 展示队伍人数限制 -->
        <div>
          队伍人数：{{ team.memberList.length }}/{{ team.teamMaxinum }}
        </div>
        <!-- 展示队伍成员列表头像 -->
        <van-space>
          <van-image v-for="user in team.memberList"
              round
              width="2rem"
              height="2rem"
              :src="user.avatarUrl"
          >
          </van-image>
        </van-space>
      </template>
      <template #footer>
        <van-button type="primary" size="small" plain v-if="showAddTeamBtn" @click="onClickAddTeam(team.teamStatus, team.id)">加入队伍</van-button>
        <van-button type="danger" size="small" plain v-if="showDissolutionTeamBtn" @click="onClickDissolutionTeam(team.id)">解散队伍</van-button>
      <van-button type="warning" size="small" plain v-if="showQuitTeamBtn" @click="onClickQuitTeam(team.id)">退出队伍</van-button>
      </template>
    </van-card>
    <van-popup v-model:show="show" @close="addInfo.teamPwd = ''">
      <van-form @submit="doAddTeam(addInfo.id, addInfo.teamPwd)">
        <van-cell-group inset>
          <van-field
              v-model="addInfo.teamPwd"
              name="pwd"
              label="房间密码"
              placeholder="请输入房间密码"
              :rules="[{ required: true, message: '请填写房间密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
// 获取父组件传递的属性
// const props = withDefaults(defineProps(), []);
import {teamStatus, teamStatusColor} from "../constants/TeamStatusEnum";
import {ref} from "vue";
import request from "../request/request";
import {showFailToast, showSuccessToast} from "vant";
import {dissolutionTeam, quitTeam} from "../services/api";

const props = defineProps(['teamList', 'showAddTeamBtn', 'showDissolutionTeamBtn', 'showQuitTeamBtn']);

// 是否展示弹出层
const show = ref(false);

// 加入队伍信息
const addInfo = ref({})

// 展示加入队伍弹出层
const onClickAddTeam = (teamStatus: number, id: number) => {
  addInfo.value.id = id;
  if (teamStatus === 1) {
    // 说明是密码房，需要弹出层输入密码
    show.value = true;
  } else {
    // 直接尝试加入队伍
    doAddTeam(addInfo.value.id, addInfo.value.teamPwd);
  }
}

// 点击解散队伍功能
const onClickDissolutionTeam = (teamId: number) => {
  // 调用解散队伍接口
  let dissolutionRes = dissolutionTeam(teamId);
  if (dissolutionRes) {
    // 证明解散成功
    showSuccessToast('解散成功！');
    window.location.reload(); // 刷新页面 TODO：待修改
  } else {
    // 证明解散失败
    showFailToast('解散失败！');
  }
}

// 点击退出队伍功能
const onClickQuitTeam = (teamId: number) => {
  let quitRes = quitTeam(teamId);
  if (quitRes) {
    showSuccessToast('退出队伍成功！');
    window.location.reload(); // 刷新页面 TODO：待修改
  } else {
    showFailToast('退出队伍失败！');
  }
}

// 执行加入队伍功能
const doAddTeam = async (id: number, teamPwd: string = '') => {
  const res = await request.post('/team/add', {
    id,
    teamPwd
  });
  if (res.data.code === 200 && res.data.data) {
    showSuccessToast('加入成功！');
    window.location.reload(); // 刷新页面 TODO：待修改
  } else {
    showFailToast(res?.data?.message);
  }
  show.value = false; // 关闭弹出层
}
</script>

<style scoped>

</style>